<template>
  <div class="all">    
    <!-- 侧边导航栏 -->
    <div class="left">
      <div class="left_title">
        <h1>后台管理系统</h1>
      </div>      
      <div class="left_user">
        <van-image
          round
          width="60px"
          height="60px"
          fit="cover"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
        <div class="left_user_name">
          <span>用户名</span>
          <span>用户名</span>
        </div>
      </div>
      <van-collapse v-model="list">
        <van-collapse-item :title=item.title :name=item.name v-for="item in routeList">
          <ul>
            <li v-for="obj in item.content"><RouterLink :to="`${obj.url}`" @click="updateCollapse(obj)">{{ obj.text }}</RouterLink></li>
          </ul>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="right">
      <!-- 右边顶部导航栏 -->
      <div class="top">
        <!-- 面包屑 -->
        <el-breadcrumb separstor="/">
          <el-breadcrumb-item v-for="item in breadcrumbList" :to="item.path" @click="updateBreadcrum(item)">{{ item.name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="right_top_right">
          <van-search v-model="keyword" shape="round" placeholder="请输入搜索关键词" />
          <van-icon name="chat-o" dot  size="25px"/>
          <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
              <template #reference>
                <van-button type="primary">浅色风格</van-button>
              </template>
          </van-popover>
          <!-- 头像 -->
          <van-image
          class="right_top_right_img"
            round
            width="60px"
            height="60px"
            fit="cover"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
        </div>
      </div>
      <!-- 右边内容 -->
      <div class="right_content" v-show="isshow">
        <!-- 统计卡片 -->
          <div class="right_content_card">
            <el-row :gutter="16" style="margin: 0;">
            <el-col :span="8">
                <div class="statistic-card">
                <el-statistic :value="98500">
                    <template #title>
                    <div style="display: inline-flex; align-items: center">
                        Daily active users
                        <el-tooltip
                        effect="dark"
                        content="Number of users who logged into the product in one day"
                        placement="top"
                        >
                        <el-icon style="margin-left: 4px" :size="12">
                            <Warning />
                        </el-icon>
                        </el-tooltip>
                    </div>
                    </template>
                </el-statistic>
                <div class="statistic-footer">
                    <div class="footer-item">
                    <span>than yesterday</span>
                    <span class="green">
                        24%
                        <el-icon>
                        <CaretTop />
                        </el-icon>
                    </span>
                    </div>
                </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="statistic-card">
                <el-statistic :value="693700">
                    <template #title>
                    <div style="display: inline-flex; align-items: center">
                        Monthly Active Users
                        <el-tooltip
                        effect="dark"
                        content="Number of users who logged into the product in one month"
                        placement="top"
                        >
                        <el-icon style="margin-left: 4px" :size="12">
                            <Warning />
                        </el-icon>
                        </el-tooltip>
                    </div>
                    </template>
                </el-statistic>
                <div class="statistic-footer">
                    <div class="footer-item">
                    <span>month on month</span>
                    <span class="red">
                        12%
                        <el-icon>
                        <CaretBottom />
                        </el-icon>
                    </span>
                    </div>
                </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="statistic-card">
                <el-statistic :value="72000" title="New transactions today">
                    <template #title>
                    <div style="display: inline-flex; align-items: center">
                        New transactions today
                    </div>
                    </template>
                </el-statistic>
                <div class="statistic-footer">
                    <div class="footer-item">
                    <span>than yesterday</span>
                    <span class="green">
                        16%
                        <el-icon>
                        <CaretTop />
                        </el-icon>
                    </span>
                    </div>
                    <div class="footer-item">
                    <el-icon :size="14">
                        <ArrowRight />
                    </el-icon>
                    </div>
                </div>
                </div>
            </el-col>
            </el-row>
          </div>
          <!-- 柱状图 -->
            <div class="right_content_top">
              <div id="main" style="width: 600px; height: 400px;"></div>
              <div class="right_content_top_right">
                <div class="demo-progress">
                  <el-progress :percentage=item.percentage :color=item.color v-for="item in progressList" />
                </div>
                <div id="main2" style="width: 300px; height: 200px;"></div>
              </div>
            </div>
            <div class="right_content_bottom">
                <div id="main3" style="width: 850px; height: 350px;"></div>
            </div>
      </div>
      <RouterView>
      </RouterView>
    </div>
  </div>
</template>
<script setup>
import { computed, onMounted, ref ,watch} from 'vue';
import { useRoute,useRouter } from 'vue-router';
import * as echarts from 'echarts';

let route=useRoute()
let list=ref([]) //用于绑定当前展开面板(绑定name)
// 定义侧边栏内容数组
let routeList=ref([
  {
    name:1,
    title:"主控制台",
    content:[
      {
        text:"首页",
        url:"/dashboard"
      },
      {
        text:"数据仪表盘",
        url:"/dashboard/DashboardPage"
      },
      {
        text:"快捷操作面板",
        url:"/dashboard/QuickActionsPanel"
      },
    ]
  },
  {
    name:2,
    title:"用户管理",
    content:[
      {
        text:"用户列表展示",
        url:"/dashboard/UserListPage"
      },
      {
        text:"用户详情/编辑",
        url:"/dashboard/UserDetailPage"
      },
      {
        text:"角色权限配置",
        url:"/dashboard/RolePermissionManagement"
      },
      {
        text:"组织架构管理",
        url:"/dashboard/DepartmentManagement"
      },
    ]
  },
  {
    name:3,
    title:"内容管理",
    content:[
      {
        text:"文章/新闻管理",
        url:"/dashboard/ArticleManagement"
      },
      {
        text:"分类标签管理",
        url:"/dashboard/CategoryTagManagement"
      },
      {
        text:"评论审核",
        url:"/dashboard/CommentModeration"
      },
    ]
  },
  {
    name:4,
    title:"系统设置",
    content:[
      {
        text:"系统基础配置",
        url:"/dashboard/BasicSettings"
      },
      {
        text:"导航菜单配置",
        url:"/dashboard/MenuConfiguration"
      },
      {
        text:"系统日志查看",
        url:"/dashboard/SystemLogs"
      },
      {
        text:"数据备份恢复",
        url:"/dashboard/BackupRestore"
      },
    ]
  },
  {
    name:5,
    title:"数据统计",
    content:[
      {
        text:"访问量统计",
        url:"/dashboard/VisitorStatistics"
      },
      {
        text:"用户行为分析",
        url:"/dashboard/UserBehaviorAnalytics"
      },
      {
        text:"业务数据报表",
        url:"/dashboard/BusinessReports"
      },
    ]
  },
  {
    name:6,
    title:"其他功能模块",
    content:[
      {
        text:"消息通知中心",
        url:"/dashboard/a"
      },
      {
        text:"文件/资源管理",
        url:"/dashboard/a"
      },
      {
        text:"任务调度监控",
        url:"/dashboard/a"
      },
      {
        text:"API管理（可选）",
        url:"/dashboard/a"
      },
    ]
  },
])
const showPopover = ref(false);
// 通过 actions 属性来定义菜单选项
const actions = [
  { text: '选项一' },
  { text: '选项二' },
  { text: '选项三' },
];
const onSelect = (action) => showToast(action.text);
// 搜索双向绑定的关键词
let keyword=ref('')
// breadcrumbList动态获取路由
let breadcrumbList=ref([
    {
      path: '/dashboard',
      name: '首页'
    },
    {
      path: '',
      name: ''
    }
])
// 展示统计面板
let isshow=ref(true)
watch(()=>route.path,(newPath)=>{
  isshow.value = newPath === '/dashboard';
  if(isshow.value) {
    console.log('当前在dashboard页面');
  }
},{immediate: true})
//监听侧边导航栏和动态路由
function updateCollapse(obj){
  //每点击一次侧边导航栏的文字li，breadcrumbList面包屑的内容就会更新
  if(obj.text==='首页'){
    breadcrumbList.value[1].path=''
    breadcrumbList.value[1].name=''
  }
  else{
    breadcrumbList.value[1].path=obj.url
    breadcrumbList.value[1].name=obj.text
  }
}
function updateBreadcrum(item){
  if(item.name==='首页'){
    breadcrumbList.value[1].path=''
    breadcrumbList.value[1].name=''
  }
}

// 右侧多行进度条
let progressList=ref([
    { color: 'red', percentage: 54 },
    { color: '#6f7ad3', percentage: 34 },
    { color: '#5cb87a', percentage: 86 },
    { color: '#f56c6c', percentage: 67 },
])
// 展示柱状图
onMounted(() => {
  const myChart = echarts.init(document.getElementById('main'));
  myChart.setOption({
      title: { text: 'ECharts 入门示例' },  //图表标题
      tooltip: {}, //提示框
      xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },
      yAxis: {},
      series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }]
      // name: '销量'：图例中显示的系列名称23
      // type: 'bar'：指定图表类型为柱状图38
      // data: [5, 20...]：对应xAxis类目的数值（单位：件）
  });
  const myChart2=echarts.init(document.getElementById('main2'));
  myChart2.setOption({
        // xAxis: {
        //   data: ['A', 'B', 'C', 'D', 'E']
        // },
        // yAxis: {},
        // series: [
        //   {
        //     data: [10, 22, 28, 23, 19],
        //     type: 'line',
        //     smooth: true
        //   }
        // ]
        series:{
                type: 'pie',
                data: [
                  {
                    value: 335,
                    name: '直接访问'
                  },
                  {
                    value: 234,
                    name: '联盟广告'
                  },
                  {
                    value: 1548,
                    name: '搜索引擎'
                  }
                ]
      }
  })
});

// 堆积面积图
onMounted(()=>{
  var chartDom = document.getElementById('main3');
  var myChart = echarts.init(chartDom);
  var option = {
    title: {
      text: 'Stacked Area Chart'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: 'Direct',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: 'Search Engine',
        type: 'line',
        stack: 'Total',
        label: {
          show: true,
          position: 'top'
        },
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  };
  myChart.setOption(option);
})
</script>
<style scoped>
/* --------- 页面基本布局 开始 ---------------- */
.all{
  width: 100%;
  height: 100%;
  display: flex;  /* 让左右两边水平排列 */
}
.left{
  width: 250px;
  height: 100%;
  background-color: #388e3c;
  position: fixed;    /* 将侧边栏固定到左边，但是使用fiexd会让元素浮起来 */
  left: 0;
  top: 0;
  overflow: auto;
}

.right{
  flex: auto;
  height: 100%;
  margin-left: 250px;
  display: flex;
  flex-direction: column;
}


/* --------- 页面基本布局 结束 ---------------- */

/* --------- 修改vant组件折叠面板的样式 开始---------------- */
/* 若在scoped样式中使用(深度选择器) */
:deep(.van-collapse-item__title){
  background: #4caf50; /* 样式未生效时，可尝试使用!important ，提高优先级*/
  font-size: 15px;
  height: 50px;
  color: white;
  align-items: center;
}
/* 用来修改背景色 */
:deep(.van-collapse-item__content) {
  background: #4caf50; /* 样式未生效时，可尝试使用!important ，提高优先级*/
  color: white;
}
/* 修改内容的边框 */
:deep(.van-collapse-item__wrapper) .van-collapse-item__wrapper::after {
  border: none;
}
/* --------- 修改vant组件折叠面板的样式 结束---------------- */


/* --------- 折叠面板中的列表样式 开始 ---------------- */
ul{
  width: 100%;
  height: 100%;
  /* background-color: rgb(15, 61, 61); */
}
li{
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
/* --------- 折叠面板中的列表样式 结束 ---------------- */
/* --------- 侧边栏其他样式 开始 ---------------- */
.left_title{
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 用户头像栏 */
.left_user{
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.left_user>.left_user_name{
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  justify-content: space-evenly;
  
}
.left_user>.left_user_name>span{
  display: inline-block;
  font-size: 14px;
  color: white;
  /* background-color: aqua; */
  text-align: right;
  padding-right: 20px;
}
/* --------- 侧边栏其他样式 结束 ---------------- */

/* --------- 右边顶部导航栏 开始 ---------------- */
.top{
  width: calc(100% - 250px);
  height: 70px;
  background-color: #c8e6c9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed; /*将顶部导航栏固定到顶部，但是元素会浮起来*/
  top: 0;
  left: 250px;
}
.el-breadcrumb{
  padding-left: 10px;
  font-size: 15px
}
.right_top_right{
  display: flex;
  width: 40%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
}
/* --------- 右边顶部导航栏 结束 ---------------- */

/* --------- 右边内容统计面板 开始 ---------------- */
.right_content{
  margin-top: 70px;
  overflow: auto; /*解决内容高度超过该元素的问题(出现滚动条)*/

}

:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
/* --------- 右边内容统计面板 结束 ---------------- */
/* --------- 右边内容上部分 开始 ---------------- */
.right_content_top{
display: flex;
justify-content: space-between;
}
.right_content_top_right{
  width: 450px;
  height: 100%;
}
/* 多行进度条 */
.demo-progress .el-progress--line {
    margin-bottom: 15px;
    max-width: 400px;
    min-width: 300px;
  }
/* --------- 右边内容上部分 结束 ---------------- */
/* --------- 右边内容下部分 开始 ---------------- */
.right_content_bottom{

}
/* --------- 右边内容下部分 结束 ---------------- */
</style>